<template>
    <div class="all">
        <!-- 登录日志header -->
        <div class="header">
            <div>
                <span class="space">&nbsp;</span>
                <span>登录日志</span>
            </div>
        </div>
        <!-- 登录日志container -->
        <div class="container">
            <div class="loginLog">
                <div class="header"><span>登录日志</span></div>
                <div class="content">
                    <template>
                        <el-table :data="tableData" border style="width: 100%;">
                            <el-table-column prop="accessTime" label="时间">
                            </el-table-column>
                            <el-table-column prop="ip" label="IP">
                            </el-table-column>
                            <el-table-column prop="region" label="访问方式">
                            </el-table-column>
                            <el-table-column prop="browser" label="浏览器">
                            </el-table-column>
                        </el-table>
                        <el-pagination background align='center' @current-change="handleCurrentChange"
                            layout="total, prev, pager, next, jumper" :total="total">
                        </el-pagination>
                    </template>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import store from '@/store';
import { mapActions, mapGetters } from 'vuex';
export default {
    name: 'ThirdLoginLogView',

    data() {
        return {
            tableData: [],
            total: 0,
            currentPage: 1,
            pageSize: 8
        };
    },

    created() {
        this.getList()
    },

    mounted() {
        this.getList()

    },
    computed: {

    },

    methods: {
        ...mapActions('home', ['getLoginLog']),

        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
            this.currentPage = val;
            this.getList()
        },
        getList() {
            let currentPage = this.currentPage;
            let pageSize = this.pageSize
            this.getLoginLog({ currentPage, pageSize }).then((res) => {
                console.log('LoginLog的currentPage,pageSize', currentPage, pageSize);
                this.tableData = res.data
                this.total = res.count
                console.log('tableData', res);
            })
        }


    },
};
</script>

<style  scoped>
* {
    padding: 0;
    margin: 0;
}

.all {
    float: right;
    background-color: #f0f0f0;
    height: 94vh;
    width: 100%;
}

.all>.header {
    display: flex;
    justify-content: space-between;
    background-color: #fff;
    font-size: 18px;
    padding: 0 20px;
    height: 40px;
    line-height: 40px;
}

.header .space {
    margin-right: 6px;
    background-color: rgb(28, 176, 154);
}

.header button {
    padding: 5px 10px;
}

.container>div {
    margin: 30px 40px;
}

.loginLog {
    background-color: #fff;
    border-radius: 20px;
    box-shadow: -8px 10px 5px rgba(6, 6, 6, .1);
}

.loginLog .header {
    padding: 12px 20px 0;
}


.loginLog /deep/ .is-leaf {
    background-color: rgba(28, 176, 154, 0.05);
    text-align: center;
}

.loginLog /deep/ .el-table__cell {
    text-align: center;
}

.content {
    padding: 40px 40px;
}
</style>